<template>
  <div class="tw-libchart">
    <div v-show="data.length>0"
      class="tw-datasetchart"
      ref="chart"
      :style="{height: height, backgroundColor: bgColor}">
    </div>

    <tw-lib-nodata v-show="data.length===0" />
  </div>
</template>

<script>
import props from './props'
import chartMixins from '../tw-lib-base/chart/chart'

export default {
  name: 'chart-ring-base',

  mixins: [chartMixins],

  props,

  data() {
    return {
      chartType: 'radar',
      datatotal: '',
      legendData: []
    }
  },

  computed: {
    option () {
      return {
        title: {
          show: this.showTitle,
          text: this.showTotal === '1' ? this.datatotal : this.titleText,
          subtext: this.showTotal === '2' ? this.datatotal : this.subtitleText,
          textAlign: 'center',
          top: this.titleTop,
          left: this.titleLeft,
          textStyle: {
            color: this.titleColor,
            fontWeight: this.titleFontWeight,
            fontSize: this.titleFontSize
          },
          subtextStyle: {
            color: this.subtitleColor,
            fontWeight: 'normal',
            fontSize: this.subtitleFontSize
          }
        },
        color: this.colors,
        legend: {
          show: this.showLegend,
          left: this.legendLeft === '' ? 'auto' : this.legendLeft,
          top: this.legendTop === '' ? 'auto' : this.legendTop,
          right: this.legendRight === '' ? 'auto' : this.legendRight,
          bottom: this.legendBottom === '' ? 'auto' : this.legendBottom,
          icon: this.icon,
          itemHeight: parseInt(this.legendHeight),
          itemWidth: parseInt(this.legendWidth),
          icon: this.icon,
          textStyle: {
            color: this.legendColor,
            fontSize: this.legendFontSize,
            padding: [3, 0, 0, 0]
          },
          width: this.legendwidth ? this.legendwidth : '100%',
          data: this.legendData
        },

        tooltip: {
          trigger: this.triggerType,
          confine: this.confine,
          extraCssText: this.confine ? 'white-space: normal; word-break: break-all;' : '',
          formatter: this.useTooltipFun ? this.tooltipFunction : this.tooltipLabel
        },
        series: this.series
      }
    }
  },

  methods: {
    setSeries () {
      const length = this.data.length
      this.series = []
      this.legendData = []
      const sdata = []
      let datatotal = 0
      for (let i = 1; i < length; i++) {
        // if (i > 0) {
        this.legendData.push(this.data[i][0])
        sdata.push({
          value: this.data[i][1],
          name: this.data[i][0]
        })

        // 计算标题
        datatotal += parseFloat(this.data[i][1])
        // }
      }
      this.datatotal = (Math.round(datatotal * 100) / 100) + ''

      this.series.push({
        type: 'pie',
        avoidLabelOverlap: true,
        radius: [this.innerRadius, this.outerRadius],
        center: this.piecenter ? this.piecenter.split(',') : ['50%', '50%'],
        startAngle: this.startAngle,
        label: {
          show: this.showLabel,
          formatter: this.formatter || '{b}\n{c}\n{d}%',
          fontSize: this.seriesFontSize
          // padding: [-24, 0, 0, 0]
        },
        labelLine: {
          show: this.showLabelLine,
          length: this.labelLineLength,
          length2: this.labelLineLength1
        },
        data: sdata
      })
    }
  },

  created () {
    window.czh = this
  },

  watch: {
    startAngle () {
      this.setSeries()
    },
    legendwidth () {
      this.setSeries()
    },
    piecenter () {
      this.setSeries()
    },
    innerRadius () {
      this.setSeries()
    },
    outerRadius () {
      this.setSeries()
    },

    showLabel () {
      this.setSeries()
    },
    labelLineLength () {
      this.setSeries()
    },
    labelLineLength1 () {
      this.setSeries()
    },
    seriesFontSize () {
      this.setSeries()
    },
    formatter () {
      this.setSeries()
    },
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
